<template>
  <div class="content">
    <!-- 查询条件 -->
    <QueryCondition @queryParams="queryParams"></QueryCondition>
    <div class="list-content">
      <div class="public-title">
        <div class="title-fl">列表</div>
      </div>
      <el-table :data="tableData" :height="tableHeight" v-loading="loading" :header-cell-style="{fontWeight:'500'}">
        <el-table-column type="selection" width="45" ali="center"></el-table-column>
        <el-table-column type="index" :index="typeIndex" label="序号" align="center" width="50"></el-table-column>
        <el-table-column prop="handle" label="操作" width="150">
         <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                :content="'办理'"
                placement="top"
              >
                <i
                  class="iconfont icbanli1"
                  style="color: #0098ff"
                  @click="onHandle(scope.row)"
                ></i>
              </el-tooltip>
                <el-tooltip
                class="item"
                effect="dark"
                :content="'查看'"
                placement="top"
              >
                  <i
                  class="iconfont icbaopi1"
                  style="color: #0098ff"
                  @click="onView(scope.row)"
                ></i>
              </el-tooltip>

              <el-tooltip
                class="item"
                effect="dark"
                :content="'催办详情'"
                placement="top"
              >
                <i
                  class="iconfont iccuibanxiangqing1"
                  style="color: #0098ff"
                  @click="showUrgeDetail(scope.row)"
                ></i>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :content="'回退详情'"
                placement="top"
              >
                <i
                  class="iconfont ichuituixiangqing1"
                  style="color: #0098ff"
                  @click="showBackDetail(scope.row)"
                ></i>
              </el-tooltip>
            
            </template>
        </el-table-column>
        <el-table-column prop="projectName" min-width="150" label="项目名称"></el-table-column>
        <el-table-column prop="itemName" label="事项名称"></el-table-column>
        <el-table-column prop="processName" label="目前办理环节"></el-table-column>
        <el-table-column prop="state" label="状态"></el-table-column>
        <el-table-column prop="applyCompany" label="申请单位"></el-table-column>
        <el-table-column prop="applyPerson" label="申请人"></el-table-column>
        <el-table-column prop="applyTime" label="申请时间">
       
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          v-if="total>0"
          background
          :page-sizes="[20, 30, 50]"
          :page-size="parameter.limit"
          layout="total, sizes, prev, pager, next"
          prev-text="上一页"
          next-text="下一页"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <ComonDialog :dialogFormVisible="dialogFormVisible" title="收藏" @close="dialogFormVisible = false"></ComonDialog>
    <DetailDialog :detailVisible="detailVisible" :title="detailTitle" @close="detailVisible = false"></DetailDialog>
  </div>
</template>
<script>
import {
  getYbxList,
} from "@/api/businessApproval";
import ComonDialog from "../components/comonDialog";
import DetailDialog from "../components/detailDialog";
import QueryCondition from "../components/queryCondition";
const fixHeight = 340;
export default {
  name: "name",
  data() {
    return {
      loading: false,
      tableHeight: window.innerHeight - fixHeight, //表格高度
      total: 0,
      timer: false,
      parameter: {
        limit: 20,
        page: 1,
      },
      tableData: [
        {
          typeIndex: 1,
          xmmc: 'dddd'
        }
      ],
      detailTitle: '',
      detailVisible: false,
      dialogFormVisible: false,
    };
  },
  components: {
    DetailDialog,
    ComonDialog,
    QueryCondition
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        that.tableHeight = window.innerHeight - fixHeight;
      })();
    };
    this.queryList();
  },

  watch: {
    tableHeight(val) {
      if (!this.timer) {
        this.tableHeight = val;
        this.timer = true;
        const that = this;
        setTimeout(function() {
          that.timer = false;
        }, 400);
      }
    }
  },

  methods: {
    // onView(data) {
    //   this.$router.push({
    //       path:'/didBox/ck',
    //       query:data
    //   })
    // 查询组件传出来的查询参数
    queryParams(val) {
      Object.assign(this.parameter, val);
      this.queryList();
    },
    onView(data) {
    this.$router.push({
          path:'/didBox/ck',
          query:data
      })
    },
    typeIndex(index) {
      //处理分页数据的 index
      return (this.parameter.page - 1) * this.parameter.limit + index + 1;
    },
    //查询
    queryList() {
      this.loading = true;
      getYbxList(this.parameter).then(res => {
        console.log(res)
        this.loading = false;
        // this.total = data.result.total;
        this.tableData = res.data.result;
      })
      .catch(() => {
        this.loading = false;
      })
    },
    //分页
    handleCurrentChange(val) {
      this.parameter.page = val;
      this.queryList();
    },
    //分页
    handleSizeChange(val) {
      this.parameter.limit = val;
      this.queryList();
    },
    showUrgeDetail() {
      this.detailVisible = true;
      this.detailTitle = '催办详情';
    },
    showCollectDetail() {
      this.dialogFormVisible = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.list-content {
  margin: 16px 0;
  padding: 12px 0;
  background: #fff;
  box-sizing: border-box;
}
/deep/ .el-pagination__total {
  float: left;
  margin-left: 10px;
}
.iconfont {
  color: #3385ff;
}
.iconfontdbot {
  margin-left: 18px;
}

.page {
  text-align: right;
  margin-top: 10px;
  position: relative;
  .Tips {
    position: absolute;
    left: 100px;
    top: 8px;
    span {
      color: #7c8195;
      font-size: 12px;
      margin: 0px 10px;
    }
  }
}
</style>
